:root{

  --panel-size:120px;
}

.main{
  display: flex;
  flex-direction: column;
  justify-content: center;

  background-color: #cccccc;
  min-width: 100vw;
  min-height: 100vh;

  z-index: -999;
}

.flex-panel{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.index{
  background-color: #00cccc;
  margin:auto 10px auto 10px;
  width: 200px;
  height: 120px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  border-radius: 12px;
  border: 2px solid black;
}
  .index .button{
    -webkit-user-select: none;
    user-select: none;
    margin: auto;
  }

.index:hover{
  cursor:pointer;
  font-size: 32px;
  background-color: #cccc00;
  border: 4px solid black;
}

.valign-middle{
  margin: 0 auto 20px auto;
} 

.container{
  width: 100vw;
  height: 100vh;
  margin: 0;
  text-align: center;
  overflow: hidden;
}

.panel-lb{
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  /* min-width: var(--panel-size);
  min-height: var(--panel-size); */
  /* border: 1px solid red; */
}

.panel-lt {
  position: absolute;
  left: 10px;
  top: 120px;
  display: flex;
  /* border: 1px solid red; */
}

.circle-button{
  -webkit-user-select:none;
  user-select: none;
  
  width: calc(var(--panel-size) / 3);
  height: calc(var(--panel-size) / 3);
  
  /* padding: 2px; */

  text-align: center;
  vertical-align: middle;

  background-color: #00cccc;
  border: 1px solid green;
  border-radius: calc( var(--panel-size) / 3 );
}

.circle-button:hover{
  cursor:pointer;
  background-color: #cccc00;
}

.panel-sider{
  position: absolute;
  left: 5px;
  /* border: 1px solid red; */
}

.flex-table{
  display: table;
}

  .flex-table .row{
    display: table-row;
  }

  .flex-table .row .col{
    display: table-cell;
  }

  .flex-table label{
    text-align: center;
    vertical-align: middle;
  }

.rect-button{
  width: calc( var(--panel-size) / 4 );
  height: calc( var(--panel-size) / 4 );
  margin: 5px;
  -webkit-user-select:none;
  user-select: none;
  background-color: #00cccc;
}

.rect-button:hover{
  cursor:pointer;
  background-color: #cccc00;
}

.txt-bold{
  font-weight: bold;
}

.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.align-left{
  margin-right: auto;
}

.align-right{
  margin-left: auto;
}

.calign-right {
  text-align: right;
}